<template>
  <div class="divMain1">
    <!-- 模糊查询 -->
    <div class="mainTop1">
      <el-form :v-model="queryEqui">
        <div class="divInputAll1">
          <!-- 输入框 -->
          <div class="divInput1">
            <div class="inputFont1">设备名称：</div>
            <div style="float: left">
              <el-input
                size="mini"
                placeholder="请输入内容"
                v-model="queryEqui.equipmentName"
              >
              </el-input>
            </div>
          </div>
          <div class="divInput1">
            <div class="inputFont1">设备编号：</div>
            <div style="float: left">
              <el-input
                size="mini"
                placeholder="请输入内容"
                v-model="queryEqui.equipmentNum"
              >
              </el-input>
            </div>
          </div>
          <div class="divSelect1">
            <div class="inputFont1">运行状态：</div>
            <div style="float: left">
              <el-select
                size="mini"
                v-model="queryEqui.runStateId"
                placeholder="请选择"
                reserve-keyword="true"
              >
                <el-option
                  v-for="item in runStates"
                  :key="item.runStateId"
                  :label="item.runStateName"
                  :value="item.runStateId"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="likeBtn1">
            <el-button
              size="mini"
              type="success"
              icon="el-icon-search"
              @click="newLoadEqui"
              >查询</el-button
            >
            <el-button size="mini" plain @click="reLoadEqui">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>

    <!-- 查所有 -->
    <div class="divSelAll1">
      <el-table
        ref="multipleTable"
        :data="equList"
        border
        style="width: 100%; font-size: xx-small; margin: auto"
        :row-style="{ height: '22px' }"
        :cell-style="{ padding: '1px' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" prop="equipmentId" width="46">
        </el-table-column>
        <el-table-column prop="equipmentName" label="设备名称" width="120">
        </el-table-column>
        <el-table-column prop="equipmentNum" label="设备编号" width="80">
        </el-table-column>
        <el-table-column prop="equipmentModel" label="设备型号" width="110">
        </el-table-column>
        <el-table-column prop="equipmentPlace" label="安装位置" width="140">
        </el-table-column>
        <el-table-column prop="runStateName" label="运行状态" width="90">
        </el-table-column>
        <el-table-column
          prop="equipmentTiming"
          label="运行时长(天)"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="equipmentUpdatetime"
          label="最近更新时间"
          width="200"
        >
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row.equipmentId)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.row.equipmentId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 修改模态框 -->
      <el-dialog
        :visible.sync="dialogUpdate"
        @close="closeDialogAdd"
        fullscreen="true"
      >
        <div class="allDialog">
          <div class="eLeft">
            <div class="mesl">
              <div class="title1">设备基本信息：</div>
              <div class="mesl2">
                <el-form
                  ref="updateForm"
                  :rules="rules"
                  label-width="80px"
                  size="mini"
                >
                  <el-form-item label="设备ID" hidden prop="equipmentId">
                    <el-input
                      v-model="updateForm.equipmentId"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="设备名称"
                    style="width: 280px"
                    prop="equipmentName"
                  >
                    <el-input
                      v-model="updateForm.equipmentName"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="设备编号"
                    style="width: 280px"
                    prop="equipmentNum"
                  >
                    <el-input
                      v-model="updateForm.equipmentNum"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="设备型号"
                    style="width: 280px"
                    prop="equipmentModel"
                  >
                    <el-input
                      v-model="updateForm.equipmentModel"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="运行时长"
                    style="width: 280px"
                    prop="equipmentTiming"
                  >
                    <el-input
                      v-model="updateForm.equipmentTiming"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="运行状态"
                    style="width: 280px"
                    prop="runStateId"
                  >
                    <el-select
                      size="mini"
                      v-model="updateForm.runStateId"
                      placeholder="请选择"
                      reserve-keyword="true"
                    >
                      <el-option
                        v-for="item in runStates"
                        :key="item.runStateId"
                        :label="item.runStateName"
                        :value="item.runStateId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="跟进人"
                    style="width: 280px"
                    prop="empId"
                  >
                    <el-select
                      size="mini"
                      v-model="updateForm.empId"
                      placeholder="请选择"
                      reserve-keyword="true"
                      @change="queryByTel(updateForm.empId)"
                    >
                      <el-option
                        v-for="item in admins"
                        :key="item.empId"
                        :label="item.empName"
                        :value="item.empId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="联系方式" style="width: 280px">
                    <el-input
                      :disabled="true"
                      v-model="updateForm.empTel"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="eRight">
            <div class="mesr">
              <div class="title1">设备详细信息：</div>
              <div class="mesr2">
                <el-form
                  ref="updateForm"
                  :rules="rules"
                  label-width="80px"
                  size="mini"
                >
                  <el-form-item
                    label="安装位置"
                    style="width: 280px; float: left"
                    prop="equipmentPlace"
                  >
                    <el-input
                      v-model="updateForm.equipmentPlace"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="现场照片"
                    style="width: 280px; float: left"
                    prop="equipmentFieldimg"
                  >
                  <el-upload
                ref="upload"
                :class="{ disUoloadSty: upload.uploadDisabled }"
                action="http://localhost:9000/sysuser/upload"
                name="file"
                list-type="picture-card"
                :on-preview="handlePreview"
                :on-progress="onProgress"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
                :on-change="handleChange"
                :file-list="upload.fileList"
                accept=".jpeg,.jpg,.gif,.png"
                :limit="upload.limitCountImg"
                :headers="upload.headerObj"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <!--预览图片-->
              <el-dialog
                :modal-append-to-body="false"
                :visible.sync="upload.imgVisible"
                width="30%"
              >
                <img
                  width="100%"
                  :src="upload.dialogImageUrl"
                  alt="图片未找到"
                />
              </el-dialog>
                  </el-form-item>

                </el-form>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" style="text-align: center">
          <el-button @click="dialogUpdate = false">取 消</el-button>
          <el-button type="primary" @click="update()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="divPage1">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryEqui.currentPage"
        :page-sizes="[4, 20, 50, 100]"
        :page-size="queryEqui.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      upload: {
        // 是否禁用上传，
        uploadDisabled: false,
        // 是否显示预览图片
        imgVisible: false,
        // 预览图片url
        dialogImageUrl: "",
        // 上传的文件列表（用于在上传组件中回显图片）, 例如: [{name: 'xxx.jpg', url: 'https://xxx.com/xxx.jpg'}]
        fileList: [],
        limitCountImg: 1, //上传图片的最大数量
        headerObj: {//Spring security时需要传递token，否则不需要该配置
          Authorization: sessionStorage.getItem("authorization"),
        },
      },
      sysAdmin: {},
      dialogUpdate: false,
      equList: [],
      updateForm: [],
      multipleSelection: [],
      queryEqui: {
        currentPage: 1, //当前页
        pageSize: 4, //每页显示的条数
        equipmentName: "",
        equipmentNum: "",
        runStateId: "",
      },
      page: {
        total: 0, //总条数
      },
      rules: {
        equipmentName: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
        equipmentNum: [{ required: true, trigger: "blur" }],
        equipmentModel: [{ required: true, trigger: "blur" }],
        equipmentTiming: [{ required: true, trigger: "blur" }],
        empName: [{ required: true, trigger: "blur" }],
        empTel: [{ required: true, trigger: "blur" }],
        equipmentPlace: [{ required: true, trigger: "blur" }],
        equipmentFieldimg: [{ required: true, trigger: "blur" }],
        equipmentImg: [{ required: true, trigger: "blur" }],
      },
    };
  },
  methods: {
    newLoadEqui(){
      this.queryEqui.currentPage=1;
      this.loadEqui();
    },

    queryByTel(id) {
      this.$axios.get("admins/" + id).then((res) => {
        if (res.data.code == 200) {
          this.sysAdmin = res.data.data.sysAdmin;
          this.updateForm.empTel = this.sysAdmin.empTel;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    reLoadEqui() {
      this.queryEqui = this.$options.data().queryEqui;
      this.loadEqui();
    },
    loadEqui() {
      this.$axios.post("equipments/queryAll", this.queryEqui).then((res) => {
        if (res.data.code == 200) {
          this.equList = res.data.data.equList;
          this.page.total = res.data.data.total;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    //每页显示的条数变化时
    handleSizeChange(val) {
      this.queryEqui.pageSize = val;
      this.loadEqui();
    },
    // 当前页数变化时
    handleCurrentChange(val) {
      this.queryEqui.currentPage = val;
      this.loadEqui();
    },
    handleClick(id) {
      this.$axios.get("equipments/" + id).then((res) => {
        // this.loadAdmin();
        this.dialogUpdate = true;
        this.updateForm = res.data.data.equVO;
      });
    },
    handleDelete(id) {
      this.$axios.delete("equipments/" + id).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.loadEqui();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    topath(path) {
      this.$router.push(path);
    },
    update() {
      this.$axios.put("equipments", this.updateForm).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.dialogUpdate = false; //关于dialog
          this.$refs.updateForm.resetFields(); //重置form
          this.loadEqui();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },

  mounted() {
    this.loadEqui();
  },
  props: ["runStates", "admins"],
};
</script>
  <style >

.divMain1 {
  width: 100%;
  height: 100%;
}
.mainTop1 {
  width: 100%;
  height: 13%;
  margin: auto;
  border: 1px solid darkgray;
  border-radius: 5px;
}
.divInputAll1 {
  background-color: white;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}
.divInput1 {
  border: 0px solid red;
  width: 23%;
  height: 100%;
  line-height: 60px;
  margin-left: 30px;
  float: left;
}
.divSelect1 {
  border: 0px solid red;
  width: 24.9%;
  height: 100%;
  line-height: 60px;
  margin-left: 30px;
  float: left;
}
.likeBtn1 {
  float: right;
  margin-right: 12px;
  line-height: 60px;
}
.inputFont1 {
  float: left;
  font-size: 2px;
}

.divSelAll1 {
  width: 100%;
  height: 75%;
  margin-top: 8px;
  line-height: 20px;
}
.divPage1 {
  width: 100%;
  height: 2%;
  margin-top: 20px;
  line-height: 10px;
}

</style>
